<script setup lang="ts">

import Echart from "./Echart.vue";
import Pie3d from './Pie3d'
import RoseDiagram from "./RoseDiagram/RoseDiagram.vue";

import statistical from "./statistical";

let widgetMap = {
  Echart,
  RoseDiagram,
  Pie3d
};

</script>
<template>
  <div :class="$style.wrap">
    <component :key="i" v-for="item, i in statistical"
      :is="widgetMap[item.widget  as keyof typeof widgetMap] || widgetMap.Echart" :option="item.option" />
  </div>
</template>
<style module>
.wrap {
  background: #0b467a;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(5, minmax(300px, 1fr));
  grid-template-rows: repeat(3, 300px);
  gap: 16px;
}
</style>